<template>
  <el-container class="app-container">
    <!-- 主内容区域 -->
    <el-main class="main-content">
      <!-- 业务查询区域 -->
      <div class="section">
        <el-row :gutter="20">
          <el-col :span="12">
            <img class="section-title2" src="@/assets/image/ytj/ywcx.png" alt="" srcset="">
          </el-col>
          <el-col :span="12" style="text-align: right;">
            <el-button v-show="state" type="text" style="color: cornsilk;font-size: 16px;margin-top: -20px;" @click.native="logout()">退出登录</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="card-row">
          <!-- 第一行三个卡片 -->
          <el-col :span="8">
            <el-card class="function-card card-blue" @click.native="handleCardClick('参保信息',false)">
              <div class="card-content">
                <span>参保信息</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="function-card card-green" @click.native="handleCardClick('缴费记录',false)">
              <div class="card-content">
                <span>缴费记录</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="function-card card-orange" @click.native="handleCardClick('consumptionRecordQuery',true)">
              <div class="card-content">
                <span>消费记录</span>
              </div>
            </el-card>
          </el-col>

          <!-- 第二行三个卡片 -->
          <el-col :span="8">
            <el-card class="function-card card-dark-blue" @click.native="handleCardClick('慢特病认定信息',false)">
              <div class="card-content">
                <span>慢特病认定信息</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="function-card card-light-blue" @click.native="handleCardClick('特殊身份认定信息',false)">
              <div class="card-content">
                <span>特殊身份认定信息</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="function-card card-light-green" @click.native="handleCardClick('生育津贴查询',false)">
              <div class="card-content">
                <span>生育津贴查询</span>
              </div>
            </el-card>
          </el-col>

          <!-- 第三行两个卡片 -->
          <el-col :span="12">
            <el-card class="function-card card-blue-large" @click.native="handleCardClick('转移接续查询',false)">
              <div class="card-content">
                <span>转移接续查询</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="function-card card-orange-large" @click.native="handleCardClick('个人账户明细查询',false)">
              <div class="card-content">
                <span>个人账户明细查询</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 资料打印和业务办理区域 -->
      <div class="section">
        <el-row :gutter="20" class="card-row">
          <!-- 资料打印 -->
          <el-col :span="12">
            <div class="sub-section">
              <h2 class="section-title">资料打印</h2>
              <el-card class="print-card">
                <div class="print-item" @click="handleCardClick('缴费明细打印')">
                  <i class="el-icon-printer" />
                  <span>1. 缴费明细打印</span>
                </div>
                <div class="print-item" @click="handleCardClick('零星报销打印')">
                  <i class="el-icon-printer" />
                  <span>2. 零星报销打印</span>
                </div>
                <div class="print-item" @click="handleCardClick('转移接续参保凭证打印')">
                  <i class="el-icon-printer" />
                  <span>3. 转移接续参保凭证打印</span>
                </div>
              </el-card>
            </div>
          </el-col>

          <!-- 业务办理 -->
          <el-col :span="12">
            <div class="sub-section">
              <h2 class="section-title">业务办理</h2>
              <el-card class="manage-card" @click.native="handleCardClick('个人账户共济管理')">
                <div class="card-content">
                  <i class="el-icon-home" />
                  <span>个人账户共济管理</span>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { getPrintSsoLoginGetUserToken } from '@/api/ytj.js'
import YW from '@/utils/jyw.min.new.js'
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      state: false,
      id: '',
      name: ''
    }
  },
  mounted() {
    // this.getPrintSsoLoginGetUserToken()
  },
  created() {
    YW.init({
      appId: '26071058866409779203480652396491',
      isvId: '260710342198406144',
      serverPublicKey: '0425E532B0333F40C2E8B4905D2AE8A31E690CDBA12E0EE20B85888DC73FA6D7EDEA86450A1459B94705CE77BF305D91666F5B8FF85CB8315F8D1CD4744F664955',
      isvPrivateKey: '00DBD4DDF2410F1C122900FF0DCBCB775EB0671A9C11A2E26D38293BCCE9E82BFE',
      isvSecretKey: '61233634333135323939303033333831',
      success: (res) => {
        console.log('初始化success', res)
        this.id = res.idNo
        this.name = res.userName
      },
      fail: (err) => {
        console.log('初始化fail', err)
      }
    })
    // YW.getSerialNumber({
    //   success: (res) => {
    //     console.log('获取sn号success', res)
    //   },
    //   fail: (err) => {
    //     console.log('获取sn号fail', err)
    //   }
    // })
  },
  methods: {
    logout() {
      sessionStorage.removeItem('token')
      this.state = false
    },
    toPage(num) {
      YW.getUserInfoByFace({
        success: (res) => {
          this.$message.info(`认证通过：`, res.userName)
          this.getPrintSsoLoginGetUserToken(res)
          // let item = res
          // const json = {
          //   patnIdNo: res.idNo, //身份证号
          //   patnUserName: res.userName, //用户姓名
          // }
        },
        fail: (err) => {
          console.log('获取用户信息失败', err)
        }
      })
    },
    // 获取token
    getPrintSsoLoginGetUserToken(e) {
      // this.$message.info(`调用获取token接口：`, this.id)
      // this.$message.info(`调用获取token接口：`, this.name)
      getPrintSsoLoginGetUserToken({
        certNo: e.idNo,
        certType: '01',
        userName: e.userName,
        mobile: ''
      }).then((res) => {
        console.log('getPrintSsoLoginGetUserToken:', res)
        sessionStorage.setItem('token', res.data.accessToken)
        this.token = res.data.accessToken
        this.state = true
        // this.OBJ2 = res.data
      }).finally(() => {
        this.$nextTick(() => {
          this.loading = false
        })
      })
    },
    handleCardClick(functionName, state) {
      // this.$message.info(`shenfenzheng：`, this.id)
      // this.$message.info(`xingming：`, this.name)
      // this.$message.info(`token：`, this.token)
      if (state) {
        if (this.state) {
          this.$router.push({ name: functionName })
        } else {
          this.$confirm('您还没有登录, 是否刷脸登录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.toPage()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
        }
      } else {
        this.$message.info(`${functionName} 功能即将上线，敬请期待！`)
      }
    }
  }
}
</script>

<style>
/* 全局样式 */
body {
  margin: 0;
  padding: 0;
  background-color: #f5f7fa;
}

.app-container {
  overflow: hidden;
}

/* 主内容区域 - 确保顶部和底部基础间距 */
.main-content {
  padding: 0px; /* 主容器内边距：上下左右统一30px，作为最外层间距 */
  overflow-y: auto;
}

/* 模块容器（大模块）- 上下间隔完全一致 */
.section {
  margin: 30px 0; /* 上下间距30px，左右0，确保模块之间、模块与页面边缘上下间距统一 */
}

/* 第一个模块去除顶部冗余间距 */
.section:first-child {
  margin-top: 0;
}

/* 最后一个模块去除底部冗余间距 */
.section:last-child {
  margin-bottom: 0;
}

/* 子模块（资料打印、业务办理）- 保持内部间距一致 */
.sub-section {
  height: 100%; /* 确保子模块高度填满父容器 */
}

/* 模块标题样式 */
.section-title {
  color: #ffffff;
  font-size: 22px;
  margin-bottom: 20px; /* 标题与下方内容的间距 */
  font-weight: bold;
  display: flex;
  align-items: center;
}
.section-title2{
  height: 18px;
  width: 80px;
  margin-bottom: 20px;
}
.section-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 18px;
  background-color: #ffffff;
  margin-right: 4px;
  border-radius: 2px;
}

/* 卡片行容器 - 去除额外间距，避免干扰模块整体间隔 */
.card-row {
  margin: 0; /* 行容器本身无额外间距，由模块容器统一控制 */
}

/* 功能卡片样式 - 统一尺寸 */
.function-card {
  margin-bottom: 15px;
  height: 120px; /* 卡片高度统一优化 */
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* 占12列的卡片保持相同高度 */
.el-col-12 .function-card {
  height: 120px;
}

.function-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.card-content {
  height: 100%;
  font-size: 15px;
  font-weight: bold;
  color: white;
  position: relative;
  padding: 0 16px;
}

.tag {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: normal;
}

/* 卡片颜色 */
.card-blue {
  background: linear-gradient(135deg, #409eff, #6aaeff);
  background-image: url('../../../assets/image/ytj/cbxx.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.card-green {
  background: linear-gradient(135deg, #52c41a, #7dd857);
  background-image: url('../../../assets/image/ytj/jfjl.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.card-orange {
  background: linear-gradient(135deg, #faad14, #ffc547);
  background-image: url('../../../assets/image/ytj/xfjlcx.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.card-dark-blue {
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  background-image: url('../../../assets/image/ytj/mtbrzxx.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.card-light-blue {
  background: linear-gradient(135deg, #69b1ff, #96c6ff);
  background-image: url('../../../assets/image/ytj/tssfrd.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.card-light-green {
  background: linear-gradient(135deg, #52c41a, #94d82d);
  background-image: url('../../../assets/image/ytj/syjtcx.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.card-blue-large {
  background: linear-gradient(135deg, #409eff, #6aaeff);
  background-image: url('../../../assets/image/ytj/zyjxcx.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.card-orange-large {
  background: linear-gradient(135deg, #faad14, #ffc547);
  background-image: url('../../../assets/image/ytj/grzhmxcx.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.manage-card {
  background: linear-gradient(135deg, #52c41a, #7dd857);
  background-image: url('../../../assets/image/ytj/grzhgjgl.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  height: 200px;
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* 资料打印卡片 */
.print-card {
  background: linear-gradient(135deg, #52c41a, #7dd857);
  background-image: url('../../../assets/image/ytj/dy.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 0;
  height: 200px; /* 与其他卡片高度一致 */
  box-sizing: border-box;
}

.print-item {
  display: flex;
  align-items: center;
  padding: 0 20px;
  cursor: pointer;
  transition: background-color 0.2s;
  color: #fff;
  height: 33.333%; /* 三等分高度 */
  line-height: 30px; /* 垂直居中 */
}

.print-item:hover {
  background-color: #f5f7fa;
}

.print-item i {
  color: #ffffff;
  font-size: 20px;
  margin-right: 15px;
}

.print-item span {
  font-size: 14px;
}
</style>
